<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>工厂</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <style>
        body {
            background: #f3f3f3;
        }

        .divTitle li.active {
            color: #327afa;
            border-bottom: 2px #327afa solid;
        }

        .divHeader {
            width: 40%;
            margin: 0 auto;
        }

        .gongchang .aui-list-view .aui-img-object {
            max-width: 40px;
            height: 40px;
        }

        .gongchang .aui-list-view-cell {
            padding: 0;
        }

        .aui-img-body {
            padding: 12px;
        }

        .bigPic {
            width: 100%;
        }

        .bigPic img {
            width: 100%;
            display: inherit;
        }

        .smallPic {
            background: #77746b;
            overflow: hidden;
            padding: 5px 0;

        }

        .smallPic li {
            width: 32%;
            float: left;
            position: relative;
            margin-left: 1%;
        }

        .smallPic li img {
            width: 100%;
            display: inherit;
        }

        .smallPic li .price {
            position: absolute;
            background: rgba(0, 0, 0, .6);
            padding: 2px;
            display: block;
            bottom: 0;
            left: 0;
            color: #fff;
            font-weight: bold;
        }

        .kongshuju {
            display: none;
            padding-top: 150px;
        }

        .kongshuju p {
            margin-top: 10px;
            font-size: 14px;
            color: #999;
            text-align: center;
        }

        .title {
            width: 100%;
            overflow: hidden;
            background: #fff;
        }

        .ulTitle {
            padding: 0 10px;
        }

        .ulTitle li {
            padding: 10px 0;
            margin-right: 30px;
            float: left;
        }

        #List-content li {
            margin-bottom: 20px;
        }

        .gongchang .aui-list-view {
            margin: 0;
        }

        .gongchang .aui-list-view:after {
            border: none;
        }
    </style>
</head>
<body>
<div class="contain gongchang">
    <div class="kongshuju">
        <p>暂无数据</p>
    </div>
    <ul class="aui-list-view" id="List-content"></ul>
</div>

<script id="List-template" type="text/x-dot-template">
    {{ for(var i in it){ }}
    <li class="aui-list-view-cell aui-img" tapmode onclick="tomyshop({{=it[i].userid}});">
        <div class="aui-img-body">
            {{=it[i].company}}
            <p>{{=it[i].content}}</p>
        </div>
        <div class="bigPic"><img src="{{=it[i].bgurl}}"></div>
        {{? it[i].mall.length > 0}}
        <ul class="smallPic">
            <li>
                <img src="{{=it[i].mall[0].thumb}}">
                <span class="price">￥{{=it[i].mall[0].price}}</span>
            </li>
            <li>
                <img src="{{=it[i].mall[1].thumb}}">
                <span class="price">￥{{=it[i].mall[1].price}}</span>
            </li>
            <li>
                <img src="{{=it[i].mall[2].thumb}}">
                <span class="price">￥{{=it[i].mall[2].price}}</span>
            </li>
        </ul>
        {{?}}
    </li>
    {{ } }}
</script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/iscroll.js"></script>
<script type="text/javascript">
    var page = 1, catid;
    var isLock=false;
    apiready = function () {
        api.parseTapmode();
        catid = api.pageParam.catid;
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/ptr_pull.png',
            bgColor: '#efeff4',
            textColor: '#959595',
            textDown: '下拉刷新',
            textUp: '松开刷新',
            showTime: true
        }, function (ret, err) {
            page = 1;
            isLock=false;
            getData(catid);
        });
        api.refreshHeaderLoading();


        //监听是否达到底部上拉加载
        api.addEventListener({
            name: 'scrolltobottom'
        }, function (ret, err) {
            page++;
            if (isLock == false) {
                getData(catid);
            }
        });
        //监听分类
        api.addEventListener({
            name: 'getcatid'
        }, function (ret) {
            if (ret && ret.value) {

                $("#List-content").html("");
                catid = ret.value.catid;
                api.refreshHeaderLoading();
            }
        });
        //重新登录监听
        api.addEventListener({
            name: 'reGetMyInfo'
        }, function (ret) {
            if (ret && ret.value) {
                page = 1;
                isLock=false;
                getData(catid);
            }
        });
        //监听分类
        api.addEventListener({
            name: "getType"
        }, function (ret, err) {
            if (ret.value.key.length > 0) {
                setWidth();
                loadYanse();
            }
        })
    }
    // $(function(){
    //     $(".divTitle").width(getWidth());
    //     loadYanse ();
    // })
    var myScroll;
    // 头部分类滚动
    function loadYanse() {
        myScroll = new IScroll('#headerTitle', {
            scrollX: true,
            scrollY: false,
            mouseWheel: true,
            vScroll: false,
            click: true,
            beforeScrollStart: function (e) {
                if (this.absDistX > (this.absDistY + 5 )) {
                    // user is scrolling the x axis, so prevent the browsers' native scrolling
                    e.preventDefault();
                }
            }
        });
    }
    // 获取分类要滚动的宽度
    function setWidth() {
        var width = 0;
        $(".ulTitle").find("li").each(function () {
            width += $(this).outerWidth(true);
        })
        $(".divTitle").width(width + 30);
    }


    //获取数据
    function getData(catid,toPage) {
        if(isLock)return;

        toPage=toPage?toPage:page;
        if(toPage==1)api.refreshHeaderLoading();

        var data = {};
        // data['catid'] = catid;
        // data['page'] = page;
        url = 'factory/getlist/catid/' + catid + '/page/' + toPage;
        isLock=true;
        ajaxRequest(url, 'get', data, function (ret, err) {
            api.refreshHeaderLoadDone();
            isLock = false;

            if (ret.status == 1) {

                $(".kongshuju").hide();
                var content = $api.byId('List-content');
                var tpl = $api.byId('List-template').text;
                var tempFn = doT.template(tpl);
                if (page > 1) {
                    if(!$.trim(ret.msg)){
                        isLock=true;
                        return;
                    }
                    $api.append(content, tempFn(ret.msg));
                } else {
                    $api.html(content, '');
                    $api.html(content, tempFn(ret.msg));
                }
            } else {
                if (page == 1) {
                    $(".kongshuju").show();
                }

                api.toast({
                    msg: "暂无更多数据",
                    duration: 2000,
                    location: 'bottom'
                });
                isLock=false;
            }
            var len = $('#List-content li').length;
            if (len > 0) {
                $('.kongshuju').hide();
            } else {
                $('.kongshuju').show();
            }
        });
    }

    // 处理热门和动态的切换,同时获取数据
    //type:想要获取数据的类别，obj当前单击的对象
    //type最好直接是分类的id，直接可以获取数据
    function switchChange(obj) {
        // 改变选择状态
        changeCheck(obj);
        var dataID = $(obj).attr("data-id");
        catid = dataID;
        if (dataID) {
            $('#List-content').empty();
            getData(dataID);
        }
    }
    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj) {
        $(obj).parent().find("li").removeClass("active");
        $(obj).addClass("active");
    }
    //热门更多时候的选择
    $(".moreList ul li").click(function () {
        changeCheck(this);
    })
    // 显示更多类别
    $(".getMoreType").click(function () {
        $(".moreType").css({"display": "block"})
    })
    // 隐藏更多类别
    $(".moreType .aui-arrow-right").click(function () {
        $(".moreType").css({"display": "none"})
    })

    function tomyshop(userid) {
        api.openWin({
            name: 'my/myShop',
            url: 'my/myShop_win.html',
            pageParam: {
                companyid: userid
            },
            //delay: 300
        });
    }
</script>
</html>